import {
  Avatar,
  Button,
  Dropdown,
  Menu,
  Icon,
  Tooltip,
  Badge,
  message,
  notification,
  Spin,
} from 'antd';
import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import HeaderSearch from '../HeaderSearch';
import SelectLang from '../SelectLang';
import styles from './index.less';
import ChangeApp from '@/components/AxHeader/ChangeApp/index';
import UploadInfo from '@/components/AxHeader/UploadInfo/index';
import DownloadInfo from '@/components/AxHeader/DownloadInfo/index';
import { axurl } from '@/shared/axurl';
import HeaderDropdown from '../HeaderDropdown';
import ChangePwd from '@/components/AxHeader/ChangePwd/index';
import { router } from '_umi@2.13.17@umi';
const signalR = require('@/assets/js/signalr.min.js');

const GlobalHeaderRight = props => {
  const {
    dispatch,
    // currentUser = {
    //   avatar: '',
    //   name: '',
    // },
    otherApp,
    clientWidth,
  } = props;
  const [appVisible, setAppVisible] = useState(false);
  const [uploadVisible, setUploadVisible] = useState(false);
  const [downloadVisible, setDownloadVisible] = useState(false);
  const [progressData, setProgressData] = useState([]);
  const [progressDataLength, setProgressDataLength] = useState(0);
  const [noCollapseApps, setNoCollapseApps] = useState([]);
  const [collapseApps, setCollapseApps] = useState([]);
  const [pwdVisible, setPwdVisible] = useState(false);
  const [pwdValues, setPwdValues] = useState({ account: 'Bill' });
  const currentUser = JSON.parse(localStorage.getItem('login_user'));

  let className = styles.right;
  const operates = [
    {
      key: 'key',
      text: '修改密码',
      icon: 'key',
      onClick: () => setPwdVisible(true),
    },
    {
      key: 'logout',
      text: '退出登录',
      icon: 'logout',
      onClick: () => {
        localStorage.removeItem('is_login');
        localStorage.removeItem('login_user');
        router.push('/login');
      },
    },
  ];
  const apps = [
    {
      isAvatar: true,
    },
  ];

  useEffect(() => {
    apps.forEach(i => {
      i.collapse = 'false';
    });
    const collapses = apps.filter(i => i.collapse === 'true');
    if (collapses.findIndex(f => f.isAvatar === true) > -1) {
      collapses.pop();
      collapses.push(...operates);
    }
    setCollapseApps([...collapses]);
    setNoCollapseApps([...apps.filter(i => i.collapse === 'false')]);
  }, []);

  /** 菜单主题为黑色（Pro唯一的默认主题） */
  // if (theme === 'dark' && layout === 'topmenu') {
  // className = `${styles.right}  ${styles.dark}`;
  className = `${styles.right}`;
  // }

  const handleMore = (key, items) => {
    const item = items[key];
    item && item.onClick && item.onClick();
  };

  const handleUpdatePwd = () => {};

  const pwdMethods = {
    handleVisible: setPwdVisible,
    handleUpdate: handleUpdatePwd,
  };

  const menuHeaderDropdown = (
    <Menu
      className={styles.menu}
      selectedKeys={[]}
      onClick={({ key }) => handleMore(key, operates)}
    >
      {operates.map((i, idx) => (
        <Menu.Item key={idx}>
          <Icon type={i.icon} />
          {i.text}
        </Menu.Item>
      ))}
    </Menu>
  );

  const HeaderAvatar =
    currentUser && currentUser.name ? (
      <>
        <HeaderDropdown overlay={menuHeaderDropdown}>
          <span className={`${styles.action} ${styles.account}`} style={{ color: 'white' }}>
            <Avatar
              size="small"
              className={styles.avatar}
              src={currentUser.headPictureUrl || '/img/ant.png'}
              alt="avatar"
              style={{ margin: 12 }}
            />
            <span className={styles.name}>{currentUser.name}</span>
          </span>
        </HeaderDropdown>
      </>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );

  return (
    <div className={className}>
      {/* 显示按钮 */}
      {noCollapseApps.length > 0 &&
        noCollapseApps.map((i, idx) => {
          const { text, count, hidden = false, icon, isAvatar, ...rest } = i;
          return (
            <span key={idx}>
              {(isAvatar && HeaderAvatar) || (
                <Tooltip title={text}>
                  <a {...rest}>
                    <Badge dot count={count}>
                      <Icon type={icon} />
                    </Badge>
                  </a>
                </Tooltip>
              )}
            </span>
          );
        })}
      {/* 折叠按钮 */}
      {collapseApps.length > 0 && (
        <Dropdown
          trigger={['click']}
          overlay={
            <Menu onClick={({ key }) => handleMore(key, collapseApps)}>
              {collapseApps.map((i, idx) => (
                <Menu.Item key={idx}>
                  <Icon type={i.icon} />
                  {i.text}
                </Menu.Item>
              ))}
            </Menu>
          }
        >
          <a className={styles.action}>
            <Icon type="more" />
          </a>
        </Dropdown>
      )}
      {pwdVisible && <ChangePwd {...pwdMethods} visible={pwdVisible} values={pwdValues} />}
      {/* <SelectLang className={styles.action} /> */}
    </div>
  );
};

export default connect(({ global, settings, user }) => ({
  theme: settings.navTheme,
  layout: settings.layout,
  currentUser: user.currentUser,
  otherApp: user.otherApp,
  clientWidth: global.clientWidth,
}))(GlobalHeaderRight);
